<%--
  Created by IntelliJ IDEA.
  User: 劳寄修
  Date: 2021/6/3
  Time: 21:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增用户</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/modules/laydate/default/laydate.css"/>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"  type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/layui/laydate.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/js/opTime.js" type="text/javascript" charset="utf-8"></script></head>
    <style>

        ::-webkit-scrollbar {/* 隐藏滚动条 */
            width: 0px;
            height: 4px;
        }

        .layui-fluid{
            padding:0 2px;
        }

    </style>

<body>
    <div class="layui-fluid" style="margin-top: 2px">
        <div class="layui-card">
            <div class="layui-card-header">添加用户</div>
            <div class="layui-card-body" style="padding: 15px;">
                <!-- 提交表达-->
                <form class="layui-form" action="" lay-filter="component-form-group">

                    <!-- 信息分类-->
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li  class="layui-this">用户信息</li>
                        </ul>
                        <!-- tab主体内容-->
                        <div class="layui-tab-content">
                            <div class="layui-form">
                                <div class="layui-form-item">
                                    <!-- 账号-->
                                    <div class="layui-inline">
                                        <label class="layui-form-label">账&nbsp;&nbsp;&nbsp;号：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="userName" lay-verify="required|email" autocomplete="off" placeholder="手机/邮箱" class="layui-input">
                                        </div>
                                    </div>
                                    <!-- 手机号 -->
                                    <div class="layui-inline">
                                        <label class="layui-form-label">手机号：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>


                                    <!-- 密码 -->
                                    <div class="layui-inline">
                                        <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;码：</label>
                                        <div class="layui-input-inline">
                                            <input type="password" id="pwd" name="userPwd" lay-verify="required|passRule" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>

                                    <!-- 确认密码-->
                                    <div class="layui-inline">
                                        <label class="layui-form-label">确认密码：</label>
                                        <div class="layui-input-inline">
                                            <input type="password" name="userPwd2" lay-verify="required|passRule|pass" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- layui-input-->
                    <!-- 个人信息-->
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">个人信息</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-form">

                                <!-- 模块一-->
                                <div class="layui-form-item">

                                    <div class="layui-inline">
                                        <div class="layui-form-label">昵&nbsp;&nbsp;&nbsp;称：</div>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input" name="userNames" lay-verify="required"/>

                                        </div>
                                    </div>

                                    <div class="layui-inline">
                                        <div class="layui-form-label">身份证号:</div>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" name="userIDcard" lay-verify="required|identity"/>
                                        </div>
                                    </div>



                                    <div class="layui-inline">
                                        <div  class="layui-form-label">支付宝：</div>
                                        <div class="layui-input-inline">
                                            <input type="text" name="userAlipay" class="layui-input" />
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">
                                            <span class="layui-font-red">*</span>
                                            可留空
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-form-label">性&nbsp;&nbsp;&nbsp;别：</div>
                                    <div class="layui-input-block">
                                        <input type="radio" name="userSex" value="男"  title="男" />
                                        <input type="radio" name="userSex" value="女" title="女" checked />
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-form-label">角&nbsp;&nbsp;&nbsp;色：</div>
                                    <div class="layui-input-block">
                                        <input type="radio" name="role" value="3" checked title="普通用户" />
                                        <input type="radio" name="role" value="2" title="入驻商家" />
                                        <input type="radio" name="role"  disabled title="系统管理者" />
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-form-label">赋予会员：</div>
                                    <div class="layui-input-inline">
                                        <input type="checkbox" id="openCreate" value="false" name="vip" lay-skin="switch" lay-text="开启|关闭"  lay-filter="switchVip">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-hide" id="createVip">
                                    <div class="layui-inline">
                                        <div class="layui-form-label">开通时间：</div>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" name="createTime" id="createTime"/>
                                        </div>

                                        <div class="layui-form-mid layui-font-20"
                                             style="text-align: center;width: 50px;margin-left: 5px;">至</div>
                                        <div class="layui-form-label">结束时间：</div>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" name="endTime" id="endTime" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- 提交表单 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

</body>

    <script>
        //Demo
        layui.use(['form','util','laydate'], function(){
            var element = layui.form
            , laydate=layui.laydate;

            laydate.render({
                elem: '#createVip'
                //设置开始日期、日期日期的 input 选择器
                //数组格式为 5.3.0 开始新增，之前版本直接配置 true 或任意分割字符即可
                ,range: ['#createTime', '#endTime']
                ,type:"datetime"
            });

            element.verify({

                passRule:function(value,item){
                    if(!/^[a-zA-Z]\w{5,17}$/.test(value)){
                        return "以字母开头，长度在6~18之间，只能包含字母、数字和下划线";
                    }
                },

                pass:function(value,item){

                    if($("#pwd").val()!=value){
                        return "密码不一致，请从新输入";
                    }

                }

            });

            //监听提交
            element.on('submit(formDemo)', function(data){

                layer.msg(JSON.stringify(data.field));
                return false;
            });

            //后门太硬，vip随便开
            element.on('switch(switchVip)',function(data){
                var $vip=document.getElementById("openCreate");
                if(data.value=="false"){
                    $vip.value =true;
                    $("#createVip").removeClass("layui-hide");
                    $("#createVip").addClass("layui-show");
                    $("#createTime").val(new Date().format("yyyy-MM-dd hh:mm:ss"));
                }else{
                    $vip.value =false;
                    $("#createVip").removeClass("layui-show");
                    $("#createVip").addClass("layui-hide");
                    $("#createTime").val("");
                    $("#endTime").val("");
                }
            });



        });


    </script>


</html>
